<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <el-form inline class="demo-table-expand">
            <el-form-item label="交易总额">
              <span>{{ props.row.allMoney }}</span>
            </el-form-item>
            <el-form-item label="订单总数">
              <span>{{ props.row.orderCount }}</span>
            </el-form-item>
            <el-form-item label="车检总数">
              <span>{{ props.row.allCars }}</span>
            </el-form-item>
            <el-form-item label="商务经理">
              <span>{{ props.row.serveName }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" label="商家名称" width="180">
      </el-table-column>
      <el-table-column prop="storePhone" label="商家电话" width="180">
      </el-table-column>
      <el-table-column label="商家logo">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.storeLogo"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="serveName" label="负责人名称"> </el-table-column>
      <el-table-column prop="servePhone" label="负责人电话"> </el-table-column>
      <el-table-column prop="address" label="商家地址"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="dialog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="商家详情" :visible.sync="dialogVisible" center>
      <el-descriptions :border="true">
        <el-descriptions-item label="商家名称">{{
          rowData.storeName
        }}</el-descriptions-item>
        <el-descriptions-item label="商家类型">
          <el-tag v-if="rowData.storeType == 1">汽车4s店</el-tag>
          <el-tag v-if="rowData.storeType == 2">汽车修理厂</el-tag>
          <el-tag v-if="rowData.storeType == 3">汽车美容店</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商家logo">
          <el-image
            :src="rowData.storeLogo"
            style="width: 50px"
            fit="scale-down"
            :preview-src-list="[rowData.storeLogo]"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="商家地址"
          >{{ rowData.province }}{{ rowData.city }}{{ rowData.town
          }}{{ rowData.address }}</el-descriptions-item
        >
        <el-descriptions-item label="商家电话">{{
          rowData.storePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="商家门头">
          <el-image
            v-for="(item, index) in rowData.frontDoor"
            :key="index"
            :src="item"
            style="width: 100px"
            fit="scale-down"
            lazy
            :preview-src-list="rowData.frontDoor"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="营业执照">
          <el-image
            v-for="(item, index) in rowData.bizLicense"
            :key="index"
            :src="item"
            style="width: 100px"
            fit="scale-down"
            lazy
            :preview-src-list="rowData.bizLicense"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="负责人姓名">{{
          rowData.masterName
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{
          rowData.masterPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="商务经理">{{
          rowData.serveName
        }}</el-descriptions-item>
        <el-descriptions-item label="商务电话">{{
          rowData.servePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{
          rowData.createDate
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="10"
      layout="prev, pager, next"
      :total="this.total"
    >
    </el-pagination>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      rowData: "",
      censusOrder: "",
    };
  },
  mounted() {
    this.getStoreList();
  },
  methods: {
    getStoreList() {
      this.$http
        .get(
          `/merchant/getMerchants?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
        )
        .then((res) => {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getStoreList();
      console.log(`当前页: ${val}`);
    },
    dialog(row) {
      this.dialogVisible = true;
      this.rowData = row;
      console.log(row);
    },
  },
};
</script>

<style>
.el-form-item.show-pic .el-image {
  margin: 0 10px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  width: 100%;
  padding-left: 30px;
}
</style>